<template>
<div class="components_edit_modal components_edit3_modal">
    <el-dialog width="1000px" title="编辑职业发展活动" :visible.sync="state" :show-close="true" :close-on-click-modal="false" class="dialog_personal">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-studentInfo clearfix">

          <el-form-item label="学校" prop="schoolId">
            <el-select
            @change="schoolChange(ruleForm.schoolId)"
            v-model="ruleForm.schoolId" placeholder="请选择">
              <el-option
              v-for="school in schoolData"
              :label="school.text"
              :value="school.id"
              :key="school.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="学院" prop="secondSchoolId">
            <el-select
            @change="secondSchoolChange(ruleForm.secondSchoolId)"
            placeholder="请选择"
            v-model="ruleForm.secondSchoolId">
              <el-option
              v-for="secondSchool in secondSchoolData"
              :label="secondSchool.text"
              :value="secondSchool.id"
              :key="secondSchool.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="专业" prop="professionId">
            <el-select
            @change="professionChange"
            placeholder="请选择"
            v-model="ruleForm.professionId">
              <el-option
              v-for="profession in professionData"
              :key="profession.id"
              :label="profession.text"
              :value="profession.id"></el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="年级" prop="professionId">
            <el-select  placeholder="请选择" v-model="ruleForm.grade">
              <el-option v-for="grade in gradeData" :key="grade.id" :label="grade.label" :value="grade.label"></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item label="班级" prop="classId">

            <el-select
            placeholder="请选择"
            v-model="ruleForm.classId" size="mini" multiple>
              <el-option
              v-for="classItem in classData"
              :label="classItem.text"
              :value="classItem.id"
              :key="classItem.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="学期" prop="semester">
            <el-select
              placeholder="请选择学期"
              v-model="ruleForm.semester">
                <el-option
                v-for="semester in semesterData"
                :key="semester.value"
                :label="semester.value"
                :value="semester.value"></el-option>
              </el-select>
          </el-form-item>

          <el-form-item label="职业发展计划" prop="planId"  class="lineblock">
            <el-select
            @change="careerChange(ruleForm.planId)"
            placeholder="请选择职业发展计划"
            v-model="ruleForm.planId">
              <el-option
              v-for="careerPlan in careerPlanData"
              :label="careerPlan.semester+careerPlan.schoolName+careerPlan.secondSchoolName+careerPlan.professionName"
              :value="careerPlan.careerDevelopmentBase.id"
              :key="careerPlan.careerDevelopmentBase.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="职业发展周次" prop="detailId">
            <el-select
            placeholder="请选择职业发展周次"
            v-model="ruleForm.detailId" size="mini">
              <el-option
              v-for="week in weekPlanData"
              :label="'第'+week.teachWeek+'周-'+week.supportPoint"
              :value="week.id"
              :key="week.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="活动类型" prop="type">
            <el-select placeholder="请选择" v-model="ruleForm.type">
              <el-option  v-for="actType in actTypeData" :key="actType.value" :label="actType.label" :value="actType.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="活动地点" prop="actSite">
            <el-input v-model="ruleForm.actSite"></el-input>
          </el-form-item>

          <el-form-item label="活动日期" prop="actDate">
            <el-date-picker
              align="right"
              type="date"
              placeholder="选择日期" v-model="ruleForm.actDate">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="活动时间" prop="actTime">
            <el-input v-model="ruleForm.actTime" placeholder="请选择输入活动时间"></el-input>
          </el-form-item>

          <el-form-item label="会议主持人" prop="recorder">
            <el-input v-model="ruleForm.compere"></el-input>
          </el-form-item>

          <el-form-item label="记录人" prop="recorder">
            <el-input v-model="ruleForm.recorder"></el-input>
          </el-form-item>

          <el-form-item label="主题" prop="subject" class="lineblock textareaBox">
            <el-input type="textarea" v-model="ruleForm.subject" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>

          <el-form-item label="参会人员" prop="attendee" class="lineblock textareaBox">
            <el-input type="textarea" v-model="ruleForm.attendee" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>

          <el-form-item label="缺席人员" prop="absentee" class="lineblock textareaBox">
            <el-input type="textarea" v-model="ruleForm.absentee" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>

          <el-form-item label="活动内容" prop="content" class="lineblock textareaBox">
            <el-input type="textarea" v-model="ruleForm.content" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>

          <el-form-item label="活动决议" prop="result" class="lineblock textareaBox">
            <el-input type="textarea" v-model="ruleForm.result" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>

          <el-form-item label="添加附件" prop="result" class="lineblock textareaBox">
            <pl-upload
              :initionData="attachment"
              :displaymode="'text'"
              :imageOnly="false"
              :multiFile="true"
              :buttonIds='{select:"selectfiles2",upload:"postfiles2",container:"container2"}'
              @reloadFiles="reloadFiles" ></pl-upload>
          </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitForm('ruleForm')">保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
        <el-button @click="state = false" size="mini" >返回</el-button>
      </div>
    </el-form>
    </el-dialog>
</div>
</template>
<script>
  import PlUpload from "../../../common/PlUpload"
  import moment from 'moment'
  export default {
    components: {
            "pl-upload":PlUpload
        },
    data(){
      return {
        state: false,
        //上传附件
        attachment:[],
        attachmentImg:[],
        schoolData:[],//院校下拉框
        secondSchoolData:[], //二级院校下拉框
        professionData:[],//专业下拉框
        gradeData:[],//年级下拉框
        classData:[],//班级下拉框，
        careerPlanData:[], //职业发展计划下拉框
        weekPlanData:[],//周计划下拉框
        actTypeData:[],//活动类型下拉框
        semesterData:[], //学期
        ruleForm:{
          schoolId:null,
          attachment:[],
          secondSchoolId:null,
          professionId:null,
          classId:null,
          semester:null,
          compere:null,
          planId:null,
          detailId:null,
          type:null,
          actTime:null,
          actSite:null,
          subject:null,
          attendee:null,
          absentee:null,
          content:null,
          result:null,
          recorder:null
        },
        rules: {
          schoolId: [
            { required: true, message: '请选择院校', trigger: 'change'}
          ],
          secondSchoolId: [
            { required: true, message: '请选择院系', trigger: 'change'}
          ],
          professionId: [
            {required: true, message: '请选择专业', trigger: 'change'}
          ],
          classId:[
            {required: true, message: '请选择班级', trigger: 'change'}
          ],
          semester:[
            {required: true, message: '请选择学期', trigger: 'change'}
          ],
          gradeId:[
            {required: true, message: '请选择年级', trigger: 'change'}
          ],
          recorder: [
            {required: true, message: '请填写记录人', trigger: 'change' },
            { min: 0, max: 50, message: '记录人名字长度在 0 到 50 个字符', trigger: 'blur' }
          ],
          planId: [
            {required: true, message: '请选择职业发展计划', trigger: 'change'}
          ],
          detailId: [
            {required: true, message: '请选择职业发展周次', trigger: 'change'}
          ],
          type: [
            { required: true, message: '请选择活动类型', trigger: 'change'}
          ],
          // actTime: [
          //   { required: true, message: '请选择活动时间', trigger: 'change',}
          // ],
          actDate: [
            { required: true, message: '请选择活动日期', trigger: 'change',type:'date'}
          ],
          actSite: [
            { required: true, message: '请填写活动地点', trigger: 'change'},
            { min: 0, max: 100, message: '活动地点长度在 0 到 100 个字符', trigger: 'blur' }
          ],
          subject: [
            { required: true, message: '请填写主题', trigger: 'change'},
            { min: 0, max: 200, message: '主题长度在 0 到 100 个字符', trigger: 'blur' }
          ],
          attendee: [
            { required: true, message: '请填写参会人员', trigger: 'change'},
            { min: 0, max: 100, message: '参会人员长度在 0 到 100 个字符', trigger: 'blur' }
          ],
          absentee: [
            { required: true, min: 0, max: 100, message: '缺席人员长度在 0 到 100 个字符', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请填写活动内容', trigger: 'change'},
            { min: 0, max: 1000, message: '活动内容长度在 0 到 500 个字符', trigger: 'blur' }
          ],
          result: [
            { min: 0, max: 1000, message: '活动决议长度在 0 到 500 个字符', trigger: 'blur' }
          ]}
      }
    },
    created(){

    },
    methods:{
      reloadFiles: function (files) {
          let vm = this;
          vm.attachment = [];
          files.forEach((item,idnex)=>{
              let model = {
                  fileRealName: item.fileRealName,
                  objectKey: item.objectKey
              }
              vm.attachment.push(model)
          })
      },
      reloadFilesImg: function (files) {
          let vm = this;
          this.ruleFormattachmentImg = [];
          files.forEach((item,idnex)=>{
              let model = {
                  fileRealName: item.fileRealName,
                  objectKey: item.objectKey
              }
              this.ruleForm.attachmentImg.push(model)
          })
      },
      // 打开模态框
      showDialog(item){
        let self = this;
        self.axios({//获得院校
          method:"get",
          url:api.getSchoolList
        }).then(function(response){
          // console.log(response.data.data);
          self.schoolData = response.data.data;
        });
        self.axios({//获得活动类型
          method:"get",
          url:api.dictsTypesSubListUrl,
          params:{
            type:'career_act_type'
          }
        }).then(function(response){
          // console.log(response.data.data);
          self.actTypeData = response.data.data;
        });
        self.getGradeByDicts();
        self.ruleForm = item;
        //获取详情
        self.getruleForm(item,
          (result)=>{
            self.ruleForm.absentee = result.absentee;
            self.ruleForm.actDate = moment(result.actDate).format('YYYY-MM-DD');
            self.ruleForm.actSite = result.actSite;
            self.ruleForm.actTime = result.actTime;
            self.attachment = result.attachment? result.attachment:[];
            self.ruleForm.attendee = result.attendee;
            self.ruleForm.classId = result.classId;
            self.ruleForm.compere = result.compere;
            self.ruleForm.content = result.content;
            self.ruleForm.createBy = result.createBy;
            self.ruleForm.detailId = result.detailId;
            self.ruleForm.id = result.id;
            self.ruleForm.planId = result.planId;
            self.ruleForm.professionId = result.professionId;
            self.ruleForm.recorder = result.recorder;
            self.ruleForm.schoolId = result.schoolId;
            self.ruleForm.secondSchoolId = result.secondSchoolId;
            self.ruleForm.semester = result.semester;
            self.ruleForm.subject = result.subject;
            self.ruleForm.type = result.type;

            // 请求班级
            self.getClassNameList(self.ruleForm.schoolId,self.ruleForm.secondSchoolId,self.ruleForm.professionId);
            // 职业发展周次
            self.getweekPlan();
            // self.secondSchoolChange(id);
          });



        this.state = true;
      },
      getruleForm(item,success){
        let self = this;
        self.axios(api.getCareerDevelopmentById+item.id)
          .then(function(response){
                success(response.data.data)
          });
      },
      // 查询年级(来自数据字典)
      getGradeByDicts(){
          let self = this;
          self.axios.get(api.dictsTypesSubListUrl, {
               params: {
                  type: "grade",
              }
          }).then((response) => {
              if (response.data.success) {
                  self.gradeData = JSON.parse(JSON.stringify(response.data.data));
              } else {
                  self.$message.error(response.data.msg);
              }
          });
            self.axios({//获得学期
              method:"get",
              url:api.dictsTypesSubListUrl,
               params: {
                  type: "semester_type",
              }
            }).then(function(response){
              // console.log(response.data.data);
              self.semesterData = response.data.data;
            });
      },

      schoolChange(id){
        let self = this;
        self.axios({//获得二级院校
          method:"get",
          url:api.getSecondSchoolList,
          params:{
            schoolId:id
          }
        }).then(function(response){
          self.ruleForm.secondSchoolId = null;
          self.secondSchoolData = [];

          self.ruleForm.professionId = null;
          self.professionData = [];

          self.ruleForm.classId = [];
          self.classData = [];

          self.ruleForm.planId = null;
          self.careerPlanData = [];

          self.ruleForm.detailId = null;
          self.weekPlanData = [];
          self.secondSchoolData = response.data.data;
        });
      },
      secondSchoolChange(id){
        let self  = this;
        self.axios({//获得专业
          method:"get",
          url:api.getProfeesionList,
          params:{
            secondSchoolId:id
          }
        }).then(function(response){
          self.ruleForm.professionId = null;
          self.professionData = [];

          self.ruleForm.classId = [];
          self.classData = [];

          self.ruleForm.planId = null;
          self.careerPlanData = [];

          self.ruleForm.detailId = null;
          self.weekPlanData = [];
          self.professionData = response.data.data
        });
      },
      professionChange(id){
        let self = this;
        self.axios.all([self.axios({//获得班级
          method:"get",
          url:api.getClassList,
          params:{
            professionId:id
          }
        }),self.axios({//获得职业发展计划
          method:"get",
          url:api.careerPlan.query,
          params:{
            schoolId:self.ruleForm.schoolId,
            secondSchoolId:self.ruleForm.secondSchoolId,
            professionId:id,
            page:1,
            rows:10000
          }
        })]).then(self.axios.spread(function (classResponse, careerResponse) {
          self.ruleForm.classId = [];
          self.classData = [];

          self.ruleForm.planId = null;
          self.careerPlanData = [];

          self.ruleForm.detailId = null;
          self.weekPlanData = [];
          self.classData = classResponse.data.data;
          self.careerPlanData = careerResponse.data.data.list;

        }));
      },
      //获取筛选后的班级
      getClassNameList(schoolId,secondSchoolId,professionId){
          let vm = this;
          vm.axios.get(api.getClassList, {
               params: {
                  schoolId: schoolId,
                  secondSchoolId: secondSchoolId,
                  professionId:professionId
              }
          }).then((response) => {
              if (response.data.success) {
                  vm.classData = JSON.parse(JSON.stringify(response.data.data));
                  // for (var i = 0; i < vm.ruleForm.classId.length; i++) {
                  //   let className = _.filter(vm.classData, function(o) { return o.id == vm.ruleForm.classId[i]; });
                  // };
                  vm.axios({//获得二级院校
                    method:"get",
                    url:api.getSecondSchoolList,
                    params:{
                      schoolId:vm.ruleForm.schoolId
                    }
                  }).then(function(response){
                    vm.secondSchoolData = response.data.data;
                  });
                  vm.axios({//获得专业
                    method:"get",
                    url:api.getProfeesionList,
                    params:{
                      secondSchoolId:vm.ruleForm.secondSchoolId
                    }
                  }).then(function(response){
                    vm.professionData = response.data.data
                  });
              } else {
                  vm.$message.error(response.data.msg);
              }
          })
      },
      //获得职业发展计划
      getweekPlan(){
        let self = this;
        self.axios({
            method:"put",
            url:api.careerPlan.queryCareedevePlanListByBaseId+self.ruleForm.planId,
          }).then(function(response){
            self.weekPlanData  = response.data.data;
            let weekPlan = _.filter(self.weekPlanData, function(o) { return o.id == self.ruleForm.detailId; });
            self.weekPlanName = '第'+weekPlan[0].teachWeek+'周-'+weekPlan[0].supportPoint;
          });
      },
      careerChange:function(){
        let self = this;
        self.axios({//获得职业发展计划
          method:"put",
          url:api.careerPlan.queryCareedevePlanListByBaseId+self.ruleForm.planId,
        }).then(function(response){
          self.ruleForm.detailId = null;
          self.weekPlanData  = response.data.data;
          console.log(self.ruleForm);
        });
      },
      returnMainPage:function(){
        this.$router.push({
          path:'/career/index'
        })
      },
      submitForm:function(){
        let self = this;
        self.$refs['ruleForm'].validate((valid) => {
          self.ruleForm.attachment = self.attachment;
            if(valid){
              self.axios({
                method: "put",
                url: api.getCareerDevelopmentById+self.ruleForm.id,
                data: self.ruleForm
              }).then(function (response) {
                if (response.data.success) {
                  self.$message({
                      type: 'success',
                      message: response.data.msg,
                  });
                  self.$parent.$refs.careerDataGrid.$emit('vuetable:refresh')
                  self.state = false;
                } else {

                }
              });
            }else{
              return false;
            }
        });
      },
      resetForm:function(formName){
        this.$refs[formName].resetFields();
      }

    }
  }
</script>
<style scoped>
.plupload{ padding-top: 0px; }
.upload-item_text{ margin: 5px 0; }
</style>
